<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-button-group>
      <a-button v-for="(item, index) in configList" :key="index" @click="changeConfig(index)" :type="index == configIndex ? 'primary' : ''">{{ item.locationName }}</a-button>
    </a-button-group>
    <a-form-model
      :model="{}"
      ref="ruleForm"
      :rules="{}"
      @submit.native.prevent
    >
      <a-form-model-item
        :label="item.configName"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        prop="schoolName"
        v-for="(item, index) in info"
        :key="index"
      >
        <a-textarea :rows="6" v-model="item.configValue" v-if="item.configType == 'textarea'" />
        <a-input size="large" v-model="item.configValue" v-else />
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button
          htmlType="submit"
          type="primary"
          :loading="state.submitBtn"
          :disabled="state.submitBtn"
          @click="onSubmit"
        >保存</a-button>
        <a-button style="margin-left: 8px" @click="() => $router.go(-1)">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
export default {
  name: 'SystemConfig',
  data() {
    return {
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      configList: [],
      configIndex: 0,
      info: []
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$common.handleGet('/config/all').then(data => {
        if (data.code === 200) {
          this.configList = data.data
          this.info = this.configList.length > 0 ? this.configList[this.configIndex].children : []
        }
      })
    },
    // 改变tab
    changeConfig(index) {
      this.configIndex = index
      this.info = this.configList[this.configIndex].children
    },
    onSubmit () {
      const {
        state,
        edit
      } = this
      state.submitBtn = true
      // 验证表单
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          edit()
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 编辑处理
    edit () {
      const submitInfo = []
      this.info.forEach(item => {
        const obj = {
          configKey: item.configKey,
          configValue: item.configValue
        }
        submitInfo.push(obj)
      })

      const obj = {
        configs: submitInfo
      }

      this.$common.handlePost('/config/update', obj)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
        .finally(() => {
          // 更新子组件里的值
          this.state.submitBtn = false
        })
    }
  }
}
</script>
